<template>
    <div>
        <div class='Navigation'>

            <div class='nav'>
                <div class='menu'>DrinkTalk</div>
                <div class='menu'> <router-link to="/">首页</router-link> </div>
                <div class='menu'>发现</div>
            </div>

            <div class='nav'>
                <div class='find'>
                    <el-input v-model="input" placeholder="搜索用户" size='medium'>
                        <el-button slot="append" icon="el-icon-search" @click="find"></el-button>
                    </el-input>
                </div>
            </div>
            
            <div class='nav'>
                <div class='menu' v-if="!username"> <router-link to="/login">登录</router-link> </div>
                <!-- <el-divider direction="vertical" v-if="!logined"></el-divider> -->
                <div class='menu' v-if="!username"> <router-link to="/register">注册</router-link> </div>
                <div class='menu' v-if="username"> <router-link to="/friend">好友</router-link> </div>
                <div class='menu' v-if="username">群聊</div>
                <div class='menu' v-if="username" @click="logout">
                    <el-avatar :size=35 :src="circleUr" ></el-avatar>
                </div>
                <div class='menu' v-if="username">{{username}}</div>
            </div>

        </div>
    </div>
</template>



<style>
.Navigation{
    width: 100vw;
    min-width: 50vw;
    height: 56px;
    background-color: rgb(255, 255, 255);
    margin: 0px;
    /* padding: 0px 50px; */
    display: flex;
    align-items: stretch;
    justify-content:space-between;
}
.nav{
    padding: 0px 30px;
    display: flex;
    align-items: stretch;
    justify-content:flex-start;
}
.menu{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0px 15px;
}
.menu:hover{
    background-color: rgb(235, 235, 235);
}
.find{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 0px 15px;
}
</style>



<script>
    import api from '../utils/api.js'

    export default {
        name: 'Navigation',
        data() {
            return {
                input: '',
                // circleUr: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                circleUr:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            };
        },
        methods: {

            find:function(){
                this.$router.replace({path:'/find', query: {keyinfo: this.input}})
            },

            logout:function(){
                var path = api.api+"/user/logout"
                this.axios
                .get(path)
                .then(response=>{
                    console.log(response)
                }) 
                this.$router.push({ path: '/login' })
            },
            
        },
        props: {
            username: String
        }
    }
</script>